<template>
  <div class="sale-edit dialog-box" v-if="inshow">
    <div class="edit-head">
      <div class="edit-head_left">
        销售规格<span class="edit-head_intro"
          >商品销售规格信息，比如服装类目中的颜色和尺码，销售规格至少一个，最多三个</span
        >
      </div>
      <div class="edit-head_right">
        <div class="right-buttom" @click="saleEdit">新增销售规格</div>
      </div>
    </div>
    <div class="edit-table">
      <el-table :data="salePropertys" style="width: 100%">
        <el-table-column label="名称" prop="name" width="180">
          <template #default="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="规格值">
          <template #default="scope" prop="valueName">
            {{ scope.row.intro }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <div class="scope-buttom">
              <div class="but-one" @click="handleEdit(scope.$index, scope.row)">
                编辑
              </div>
              <div
                class="but-two"
                @click="handleDelete(scope.$index, scope.row)"
              >
                删除
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="新增销售规格"
      v-model="dialogVisible"
      width="70%"
      top="15vh"
    >
      <div class="display-edit">
        <el-form ref="form" label-width="100px" size="mini">
          <el-form-item label="名称">
            <el-input
              maxlength="10"
              v-model="tableList.name"
              @keydown.enter="restrictedNum"
              placeholder="请输入类目名称"
            ></el-input>
            <div class="sale-intro">请输入销售规格名称</div>
          </el-form-item>
          <!-- <el-form-item label="排序">
            <el-input-number
              v-model="tableList.sortOrder"
              :min="1"
              :max="1000"
            ></el-input-number>
            <div class="sale-intro">
              设置商品规格排序，序号越小排序越前,1-1000之间
            </div>
          </el-form-item> -->
        </el-form>
        <f-line title="新增销售规格值" type="brand"></f-line>
        <div class="dialog-table">
          <el-table :data="tableList.propertyValues" style="width: 100%">
            <el-table-column label="名称" prop="name">
              <template #default="scope">
                <el-input
                  maxlength="10"
                  @change.enter="valueNameInput(scope.$index, $event)"
                  v-model="scope.row.name"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <div class="scope-buttom">
                  <div
                    class="but-two"
                    @click="attributeDelete(scope.$index, scope.row)"
                  >
                    删除
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" style="margin-top: 20px" @click="editValues"
            >新增规格</el-button
          >
        </div>
      </div>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click.enter="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import sale from "./js/sale";
import ala from "@/service/ala";
export default {
  props: {
    productView: {},
  },
  data() {
    return {
      topcategory: false,
      typecategory: "",
      dialogVisible: false,
      radioGroup: "",
      saleName: "",
      tableList: [],
      addEdit: "",
      salePropertys: "",
      inshow: false,
      listIndex: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.inshow = false;
      this.salePropertys = this.productView.salePropertys;
      this.inshow = true;
    },
    handleDelete(index, val) {
      sale.handleDelete(this, index, val);
    },
    attributeDelete(index, val) {
      this.tableList.values.splice(index, 1);
    },
    handleEdit(index, val) {
      this.dialogVisible = true;
      this.tableList = val;
      this.listIndex = index;
    },
    save() {
      sale.save(this);
    },
    saleEdit() {
      sale.saleEdit(this);
    },
    editValues() {
      var data = {
        id: "00000000-0000-0000-0000-000000000000",
        name: "",
      };
      this.tableList.propertyValues.push(data);
    },
    restrictedNum(ev) {
      if (ev.target.value.length > 30) {
        this.$alert("最多输入三十个字符")
          .then(() => {})
          .catch(() => {});
        this.tableList.name = "";
      }
    },
    valueNameInput(index, ev) {
      if (ev.target.value.length > 8) {
        this.$alert("最多输入八个字符")
          .then(() => {})
          .catch(() => {});
        this.tableList.values[index].valueName = "";
      }
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
@import "./style.scss";
</style>

